<!-- 审批配置表单 -->
<template>
    <a-table
        :columns="tableColumns"
        :data-source="form.approveButtonConfig.buttonSetting"
        :pagination="false"
        :scroll="{ x: false, y: false }"
        class="approval-table"
    >
        <template #bodyCell="{ column, record }">
            <!-- 显示名称 -->
            <template v-if="column.dataIndex === 'showName'">
                <a-input v-model:value="record.showName" @change="handleFormChange" />
            </template>
            <!-- 批量审批 -->
            <template v-if="column.dataIndex === 'batchApprovalFlag'">
                <!-- 只有同意，拒绝才有批量审批 -->
                <a-checkbox
                    v-show="['同意', '拒绝'].includes(record.name)"
                    v-model:checked="record.batchApprovalFlag"
                    @change="handleFormChange"
                />
            </template>
            <!-- 启用 -->
            <template v-if="column.dataIndex === 'enable'">
                <a-switch v-model:checked="record.enable" @change="handleFormChange" />
            </template>
        </template>
    </a-table>
</template>

<script lang="ts">
    import { useI18n } from 'vue-i18n'
    import { defineComponent, ref, watch } from 'vue'
    import { cloneDeep } from 'lodash-es'
    import { approveButtonConfig } from '../../../types/processNodeForm'
    interface approveForm {
        approveButtonConfig: approveButtonConfig
    }
    export default defineComponent({
        props: {
            processNodeForm: {
                type: Object,
                default: () => ({})
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const { t } = useI18n()
            const tableColumns = ['name', 'showName', 'batchApprovalFlag', 'enable'].map(columnKey => {
                return {
                    title: t(`tableColumn.${columnKey}`),
                    align: 'center',
                    dataIndex: columnKey,
                    key: columnKey,
                    ellipsis: true,
                    scopedSlots: { customRender: columnKey }
                }
            })
            const form = ref<approveForm>()
            // 从processNodeForm属性中，获取当前组件需要的表单数据，构造一个新的表单
            function initForm() {
                const { approveButtonConfig = { buttonSetting: [] } } = cloneDeep(props.processNodeForm || {})
                form.value = { approveButtonConfig }
            }

            watch(
                () => props.processNodeForm,
                () => {
                    // processNodeForm发生变化时，重新初始化一下审批表单
                    initForm()
                },
                {
                    deep: true,
                    immediate: true
                }
            )

            // 表单数据发生变化，向组件外抛出change事件
            function handleFormChange() {
                emit('change', cloneDeep(form.value))
            }

            return {
                // 组件属性
                tableColumns,
                form,

                // 组件方法
                handleFormChange
            }
        }
    })
</script>

<style lang="less" scoped>
    .approval-table {
        :deep(.@{ant-prefix}-table-tbody > tr > td) {
            border-bottom: none;
        }

        :deep(.@{ant-prefix}-table-body) {
            overflow-x: hidden;
        }

        :deep(.@{ant-prefix}-table-thead > tr > th) {
            background: none;
            border-bottom: none;
        }
    }
</style>

<i18n>
zh-CN:
  tableColumn:
    name: '操作按钮'
    showName: '显示名称'
    batchApprovalFlag: '批量审批'
    enable: '启用'
</i18n>
